﻿@model SF.WebClient.Controllers.DatagridExcelDataModel
@{
    ViewBag.Title = "datagrid编辑器";
}
<link href="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.rowState.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.editors.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height:40px;overflow:hidden;">
        <div class="datagrid-toolbar" style="height:100%;padding:7px;">
            <a id="btnInsert" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增一行</a>
            <a id="btnSave" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存数据行(不交互后台)</a>
        </div>
    </div>
    <div data-options="region:'center',border:false">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',border:false" style="height:160px;padding:20px;overflow:hidden;">
                <div style="font-size:22px;font-weight:bolder;width:100%;text-align:center;">
                    本demo演示如何以通用的方式聚焦datagrid中的编辑器
                </div>
                <form id="PurchaseApplyForm" method="post">
                    <table border="0" style="width:100%;height:auto;margin-top:15px;padding:10px;">
                        <tr>
                            <td style="width:110px;text-align:right;">申请人：</td>
                            <td>
                                <input id="ApplyStaff" name="ApplyStaff" type="hidden" value="@Model.ApplyStaff" />
                                <input class="easyui-textbox" id="ApplyStaffName" name="ApplyStaffName" data-options="readonly:true" value="@Model.ApplyStaffName" style="width:120px">
                            </td>
                            <td style="width: 110px; text-align: right;">编号：</td>
                            <td>
                                <input class="easyui-textbox" id="ApplyID" name="ApplyID" value="@(Model.ApplyID)" data-options="readonly:true" style="width:220px">
                            </td>
                        </tr>
                        <tr>
                            <td style="width:110px;text-align:right;">申请部门：</td>
                            <td>
                                <input id="ApplyDepartment" name="ApplyDepartment" type="hidden" value="@Model.ApplyDepartment" />
                                <input class="easyui-textbox" id="ApplyDepartmentName" name="ApplyDepartmentName" data-options="readonly:true" value="@Model.ApplyDepartmentName" style="width:120px">
                            </td>
                            <td style="width:110px;text-align:right;">日期：</td>
                            <td>
                                <input class="easyui-textbox" id="ApplyDate" name="ApplyDate" data-options="readonly:true" value="@(Model.ApplyDate.HasValue ? Model.ApplyDate.Value.ToString("yyyy-MM-dd") : string.Empty)" style="width:120px">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'center',border:false" style="border-top-width:1px;">
                <table id="dgBuyItemList"></table>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {

        var dg = $("#dgBuyItemList"),
            defaultRow = { ID: "", Name: "", ApplyCount: "", IsEmergency: 'true', Remark: "", Stocks: "" },
            insertPosition = "bottom";

        var dgInit = function () {

            var getColumns = function () {
                var result = [];

                var normal = [
                    { field: "ck", checkbox: true },
                    {
                        field: 'Name', title: '物资名称', width: 180,
                        editor: {
                            type: "validatebox",
                            options: {
                                required: true
                            }
                        }
                    },
                    {
                        field: 'ApplyCount', title: '申请数量', width: 100,
                        editor: {
                            type: "numberbox",
                            options: {
                                required: true
                            }
                        }
                    },
                    {
                        field: 'IsEmergency', title: '是否加急', width: 100,
                        editor: {
                            type: "checkbox",
                            options: {
                                on: "true",
                                off: "false"
                            }
                        },
                        formatter: function (val) { return val == "true" ? "是" : "否"; }
                    },
                    {
                        field: 'Remark', title: '备注', width: 100,
                        editor: {
                            type: "text"
                        }
                    },
                    {
                        field: 'Stocks', title: '库存数量(只读)', width: 100,
                        editor: {
                            type: "textbox",
                            options: {
                                readonly: true
                            }
                        }
                    }
                ];
                result.push(normal);

                return result;
            };
            var options = {
                title:"演示自动聚焦第一行第一列的编辑器（利用扩展给编辑器的setFocus方法）",
                idField: "ID",
                rownumbers: true,
                fitColumns: true,
                fit: true,
                border: false,
                singleSelect: true,
                columns: getColumns(),
                // 开始编辑
                onBeginEdit: function (index, row) {
                    //物资编码editor
                    var editor1 = $(this).datagrid("getEditor", { index: index, field: "Name" });

                    //自动聚焦物资编码列
                    $.util.delay(function () {
                        if ($.isFunction(editor1.actions.setFocus)) {
                            if (editor1.actions.focusable == undefined || ($.isFunction(editor1.actions.focusable) && editor1.actions.focusable(editor1.target[0]) == true)) {
                                editor1.actions.setFocus(editor1.target[0]);
                            }
                        }
                        else {
                            editor1.target.focus();
                        }
                    });
                },
                onDblClickRow: function (index, row) {
                    dg.datagrid("beginEdit", index);
                }
            };

            dg.datagrid(options);

        };

        var getInsertRowIndex = function () {
            return insertPosition == "top" ? 0 : dg.datagrid("getRows").length;
        }

        var buttonBindEvent = function () {

            $("#btnInsert").click(function () {
                var targetIndex = getInsertRowIndex(), targetRow = $.extend({}, defaultRow, { ID: $.util.guid() });
                dg.datagrid("insertRow", { index: targetIndex, row: targetRow });
                dg.datagrid("beginEdit", targetIndex);
            });

            $("#btnSave").click(function () {
                var rows = dg.datagrid("getRows"), len = rows.length;
                for (var i = 0; i < len; i++) {
                    if (dg.datagrid("isEditing", i)) {
                        dg.datagrid("endEdit", i);
                    }
                }
            });
        };


        dgInit(); buttonBindEvent();


    });
</script>
